// Todo 类定义
class Todo {
    constructor(id, text, completed) {
        this.id = id;
        this.text = text;
        this.completed = completed;
    }
}

// 存储待办事项的数组
let todos = [];
let nextId = 0;

// 渲染单个待办事项为列表项
function renderTodo(todo) {
// 创建列表项元素及其子元素，设置样式和事件监听器
    const li = document.createElement('li');
    li.id = 'todo-' + todo.id;
    if (todo.completed) {
        li.style.textDecoration = 'line-through';
        li.style.color = 'rgb(23, 157, 215)';
    }
    li.textContent = todo.text;

    // 编辑按钮
    const editBtn = document.createElement('button');
    editBtn.textContent = '编辑';
    editBtn.onclick = function() {
        editTodo(todo.id);
    };

    // 完成按钮
    const completeBtn = document.createElement('button');
    completeBtn.textContent = todo.completed ? '未完成' : '完成';
    completeBtn.onclick = function() {
        toggleComplete(todo.id);
    };

    // 删除按钮
    const deleteBtn = document.createElement('button');
    deleteBtn.textContent = '删除';
    deleteBtn.onclick = function() {
        deleteTodo(todo.id);
    };

    li.appendChild(editBtn);
    li.appendChild(completeBtn);
    li.appendChild(deleteBtn);
    return li;
}
// 将待办事项添加到页面
function renderTodos() {
    const todoList = document.getElementById('todolist');
    todoList.innerHTML = ''; // 清空现有的待办事项

    const sortedTodos = todos.slice().sort((a, b) => a.completed - b.completed);
    sortedTodos.forEach(todo => {
        const li = renderTodo(todo);
        todoList.appendChild(li);
    });

    if (todos.length === 0) {
        todoList.innerHTML = '你现在没有待办的学习事项噢！';
    }
}

// 切换待办事项的完成状态
function toggleComplete(id) {
    const todo = todos.find(t => t.id === id);
    if (todo) {
        todo.completed = !todo.completed;
        renderTodos();
    }
}

// 删除待办事项
function deleteTodo(id) {
    todos = todos.filter(t => t.id !== id);
    renderTodos();
}
// 编辑待办事项
function editTodo(id) {
    const todo = todos.find(t => t.id === id);
    if (todo && !todo.completed) { // 只有未完成的事项可以编辑
        const li = document.getElementById('todo-' + id);
        if (li) {
            // 创建一个输入框，让用户可以编辑待办事项的文本
            const inputField = document.createElement('input');
            inputField.type = 'text';
            inputField.value = todo.text;
            inputField.onblur = function() { // 当输入框失去焦点时更新待办事项
                const newText = inputField.value.trim();
                if (newText !== '') {
                    todo.text = newText;
                    renderTodos();
                }
            };
            inputField.onkeydown = function(event) { // 允许使用回车键提交
                if (event.key === 'Enter') {
                    inputField.blur(); // 触发onblur事件
                }
            };

            // 替换待办事项文本与按钮的元素
            li.innerHTML = '';
            li.appendChild(inputField);
        }
    }
}

// 添加待办事项
document.getElementById('add-todo').addEventListener('click', function() {
    const input = document.getElementById('new-todo');
    const text = input.value.trim();
    if (text) {
        todos.push(new Todo(++nextId, text, false));
        renderTodos();
        input.value = ''; // 清空输入框
    }
});

// 保存和恢复数据
window.addEventListener('beforeunload', function() {
    localStorage.setItem('todos', JSON.stringify(todos));
});

window.addEventListener('load', function() {
    const savedTodos = JSON.parse(localStorage.getItem('todos'));
    if (savedTodos) {
        todos = savedTodos;
        nextId = todos.reduce((maxId, todo) => Math.max(maxId, todo.id), 0);
        renderTodos();
    }
});

// 初始渲染
renderTodos();